<template>
  <div class="logo-com" :class="size" @click="navigateTo('/')">
    <img src="@/assets/image/logo.svg" alt="电商工具助手" class="logo-image" />
    <span class="logo-text">电商助手</span>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    size?: 'small' | 'medium' | 'large';
  }>(),
  {
    size: 'medium',
  },
);
</script>

<style scoped lang="scss">
.logo-com {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.small {
  .logo-image {
    width: 20px;
    height: 20px;
  }

  .logo-text {
    font-size: 0.8rem;
    color: var(--primary-purple, #6b46c1);
  }
}

.medium {
  .logo-image {
    width: 28px;
    height: 28px;
  }

  .logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-purple, #6b46c1);
  }
}

.logo-com:hover {
  font-weight: 700;
  transform: scale(1.05);
}
</style>
